<template>
  <a-radio-group :value="innerValue" @input="change" style="margin-top: 5px">
    <a-radio v-for="item in RelationType" :key="item" :value="item">
      {{ RelationTypeTitle[item] }}
    </a-radio>
  </a-radio-group>
</template>
<script>
import {createRelation, RelationType, RelationTypeTitle} from '@comp/hhd/design/relation/types';
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'RelationTypeSelector',
  model: createModelForVue(),
  props: {
    value: createProps(String),
    relation: createProps(Object, createRelation),
  },
  methods: {
    change(v) {
      if (this.hasData()) {
        this.$confirm({
          title: '确认修改吗?',
          content: '修改后需要重置数据, 确认修改吗',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            this.innerValue = v;
            this.tryClear();
          }
        });
      } else {
        this.innerValue = v;
        this.tryClear();
      }
    },
    hasData() {
      return true;
    },
    tryClear() {
      try {
        this.relation.manuals = [];
        this.relation.auto = undefined;
        this.relation.detail = undefined;
      } catch (e) {}
    },
  },
  computed: {
    RelationTypeTitle() {
      return RelationTypeTitle;
    },
    RelationType() {
      return RelationType;
    },
    innerValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('change', v);
      },
    }
  }
};
</script>